<template>
    <div class="" v-if="state !== 'hidden'">

        <el-form ref="form" :model="form" :label-width="'write' == state ? '115px':'auto'"
                 :class="'write' == state ? 'write-form':'read-form'"
                 :label-position="'write' == state ? 'top':'left'">

            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>调拨车辆</span>
                    <span>已选择调拨车辆数量/辆：{{ form.carList && form.carList.length }}</span>
                </div>

                <el-table border
                    :data="form.carList"
                    style="width: 100%">
                    <el-table-column
                        prop="vinNo"
                        label="车架号"
                        align="center"
                        show-overflow-tooltip
                        min-width="180">
                        <template v-slot="{row}">
                            {{row.vinNo|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="brandName"
                        align="center"
                        show-overflow-tooltip
                        label="品牌/车系/车型"
                        min-width="180">
                        <template v-slot="{row}">
                            {{row.brandName|filterNull}}/{{row.seriesName|filterNull}}/{{row.modelName|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="carNo"
                        align="center"
                        show-overflow-tooltip
                        min-width="130"
                        label="调出车牌号">
                        <template v-slot="{row}">
                            {{row.carNo|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="businessType"
                        align="center"
                        show-overflow-tooltip
                        min-width="100"
                        label="调出车辆状态">
                        <template v-slot="{row}">
                            {{ selectDictLabel(dict.type.car_business_type, row.businessType) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        align="center"
                        show-overflow-tooltip
                        min-width="130"
                        label="上牌城市">
                        <template v-slot="{row}">
                            {{row.propertyRightName|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="'write' == state" label="操作" min-width="80" align="center"
                                     class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <e-button size="mini" type="text"
                                      @click="handleDelete(scope.row, scope.$index)"
                            >删除
                            </e-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>

            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>调拨发起</span>
                    <span></span>
                </div>

                <el-row :gutter="30">

                    <el-col :span="8">
                        <el-form-item label="调出车辆归属公司:" prop="allocationOutId"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请选择调出车辆归属公司',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.allocationOutId, callback)
                                       }:{}">

                            <el-select v-if="'write' == state" filterable v-model="form.allocationOutId" clearable disabled
                                       style="width: 100%">
                                <template v-for="(item, index) in belongCompanyList">
                                    <el-option :label="item.deptName" :value="item.deptId" :key="index"></el-option>
                                </template>
                            </el-select>

                            <span v-else>{{form.allocationOutName|filterNull}}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="调入车辆归属公司:" prop="allocationInId"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请选择调入车辆归属公司',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.allocationInId, callback)
                                       }:{}">

                            <el-select v-if="'write' == state" filterable @change="belongChange" v-model="form.allocationInId" clearable
                                       style="width: 100%">
                                <template v-for="(item, index) in belongCompanyList">
                                    <el-option :label="item.deptName" :value="item.deptId" :key="index"></el-option>
                                </template>
                            </el-select>
                            <span v-else>{{form.allocationInName|filterNull}}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="调拨原因:" prop="allocationReason">
                            <el-input v-if="'write' == state" type="textarea"
                                      v-model="form.allocationReason" clearable maxlength="200"
                                      placeholder="请填写调拨备注信息，不超过200个字符"></el-input>
                            <span v-else>{{ form.allocationReason|filterNull }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item
                            label="调拨附件:"
                            prop="imageOss"
                            style="width: 100%">
                            <ImageCommon
                                :disabled="'write' != state"
                                :up-type="2"
                                info="选择附件"
                                :limit="9"
                                v-model="form.allocationAnnex"
                            ></ImageCommon>
                        </el-form-item>
                    </el-col>

                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>调拨费用项信息</span>
                    <span></span>
                </div>
                <el-row :gutter="30">

                    <el-col :span="8">
                        <el-form-item
                            label="二手车款:"
                            prop="gpsPrice">
                            <el-input
                                @change="inputChange"
                                v-model="form.secondFee"
                                clearable
                                v-if="'write' == state"
                                @input="value=>{if(isNaN(form.secondFee)) { form.secondFee = '' }; if(form.secondFee.indexOf('.')>0){form.secondFee=form.secondFee.slice(0,form.secondFee.indexOf('.')+3)} form.secondFee = form.secondFee.replace(new RegExp(`^\\D*(\\d{8}(?:\\.\\d{0,2})?).*$`, ''), '$1')}"
                                placeholder="请输入费用金额"
                            ></el-input>
                            <span v-else>{{ form.secondFee | filterNull }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="运费:"
                            prop="gpsPrice">
                            <el-input
                                @change="inputChange"
                                v-model="form.freightFee"
                                clearable
                                v-if="'write' == state"
                                @input="value=>{if(isNaN(form.freightFee)) { form.freightFee = '' }; if(form.freightFee.indexOf('.')>0){form.freightFee=form.freightFee.slice(0,form.freightFee.indexOf('.')+3)} form.freightFee = form.freightFee.replace(new RegExp(`^\\D*(\\d{8}(?:\\.\\d{0,2})?).*$`, ''), '$1')}"
                                placeholder="请输入费用金额"
                            ></el-input>
                            <span v-else>{{ form.freightFee | filterNull }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="调拨费:"
                            prop="gpsPrice">
                            <el-input
                                @change="inputChange"
                                v-model="form.allocationFee"
                                clearable
                                v-if="'write' == state"
                                @input="value=>{if(isNaN(form.allocationFee)) { form.allocationFee = '' }; if(form.allocationFee.indexOf('.')>0){form.allocationFee=form.allocationFee.slice(0,form.allocationFee.indexOf('.')+3)} form.allocationFee = form.allocationFee.replace(new RegExp(`^\\D*(\\d{8}(?:\\.\\d{0,2})?).*$`, ''), '$1')}"
                                placeholder="请输入费用金额"
                            ></el-input>
                            <span v-else>{{ form.allocationFee | filterNull }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="其他费用:"
                            prop="gpsPrice">
                            <el-input
                                @change="inputChange"
                                v-model="form.otherFee"
                                clearable
                                v-if="'write' == state"
                                @input="value=>{if(isNaN(form.otherFee)) { form.otherFee = '' }; if(form.otherFee.indexOf('.')>0){form.otherFee=form.otherFee.slice(0,form.otherFee.indexOf('.')+3)} form.otherFee = form.otherFee.replace(new RegExp(`^\\D*(\\d{8}(?:\\.\\d{0,2})?).*$`, ''), '$1')}"
                                placeholder="请输入费用金额"
                            ></el-input>
                            <span v-else>{{ form.otherFee | filterNull }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="合计:"
                            prop="gpsPrice">
                            <el-input
                                v-model="form.feeAmount"
                                clearable readonly
                                v-if="'write' == state"
                                @input="value=>{if(isNaN(form.feeAmount)) { form.feeAmount = '' }; if(form.feeAmount.indexOf('.')>0){form.feeAmount=form.feeAmount.slice(0,form.feeAmount.indexOf('.')+3)} form.feeAmount = form.feeAmount.replace(new RegExp(`^\\D*(\\d{8}(?:\\.\\d{0,2})?).*$`, ''), '$1')}"
                                placeholder="自动计算"
                            ></el-input>
                            <span v-else>{{ form.feeAmount | filterNull }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="备注:" prop="remark">
                            <el-input v-if="'write' == state" type="textarea"
                                      v-model="form.remark" clearable maxlength="200"
                                      placeholder="请填写费用项备注信息，不超过200个字符"></el-input>
                            <span v-else>{{ form.remark|filterNull }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item
                            label="费用项附件:"
                            prop="imageOss"
                            style="width: 100%">
                            <ImageCommon
                                :disabled="'write' != state"
                                :up-type="2"
                                info="选择附件"
                                :limit="9"
                                v-model="form.feeAnnex"
                            ></ImageCommon>
                        </el-form-item>
                    </el-col>

                </el-row>

            </div>

        </el-form>

    </div>
</template>

<script>

import {listDept} from "@/api/system/dept";

export default {
    dicts: ["car_business_type"],
    props: {
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
    },
    computed: {
        form: {
            get() {
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },
        selectDictLabel() {
            return function (arr, val) {
                return arr
                    .map((a) => {
                        if (a.value == val) {
                            return a.label;
                        }
                    })
                    .filter((a) => a)[0];
            };
        },
    },
    watch: {
        form: {
            immediate: true,
            deep: true,
            handler(val) {
                if (this.firstEnter && val && val.carList) {
                    this.firstEnter = false

                    // this.form.allocationOutName = this.form.carList[0].ascription
                    // this.form.allocationOutId = this.form.carList[0].ascriptionId
                    this.getCompanyOrigin()
                }
            }
        }
    },
    data() {
        return {
            firstEnter: true,
            belongCompanyList: [],
        };
    },
    methods: {
        inputChange() {
            let all =
                (Number(this.form.secondFee ?? 0) +
                    Number(this.form.freightFee ?? 0) +
                    Number(this.form.allocationFee ?? 0) +
                    Number(this.form.otherFee ?? 0)).toFixed(2);
            all = Number(all);
            this.$set(this.form, 'feeAmount', all);
        },
        getCompanyOrigin() {
            listDept(
                {
                    deptType: '2',//组织类型（1部门 2公司）
                    regionId: null,//所在城市（省市区id）
                }).then(res => {
                this.belongCompanyList = res.data
            })
        },
        //归属
        belongChange(val) {
            let find = this.belongCompanyList.find(item => val == item.deptId);
            if (find) {
                this.form.allocationInName = find.deptName ?? null
            } else {
                this.form.allocationInName = null
            }
        },

        /** 删除按钮操作 */
        handleDelete(row, index) {
            this.$modal.confirm("确定删除").then(res=>{
                this.form.carList.splice(index, 1)
            })
        },
        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },
        async valid() {
            return new Promise((resolve) => {
                if ('write' == this.state) {
                    this.$refs["form"].validate(valid => {
                        resolve(valid);
                    });
                } else {
                    resolve(true)
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
    margin-left: 0 !important;
}

.el-descriptions {
    margin: 0 -15px;
}
</style>
